<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小朋友数学乐园</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Comic Sans MS', '微软雅黑', cursive;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
            color: white;
        }

        .header h1 {
            font-size: 3em;
            text-shadow: 3px 3px 6px rgba(0,0,0,0.3);
            margin-bottom: 10px;
            animation: bounce 2s infinite;
        }

        .game-selector {
            display: flex;
            gap: 20px;
            margin-bottom: 30px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .game-btn {
            padding: 15px 30px;
            font-size: 1.2em;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: bold;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }

        .game-btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.3);
        }

        .add-btn {
            background: linear-gradient(45deg, #ff6b6b, #ffa500);
            color: white;
        }

        .subtract-btn {
            background: linear-gradient(45deg, #4ecdc4, #44a08d);
            color: white;
        }

        .compare-btn {
            background: linear-gradient(45deg, #a8edea, #fed6e3);
            color: #333;
        }

        .game-area {
            background: white;
            border-radius: 30px;
            padding: 40px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            max-width: 800px;
            width: 100%;
            text-align: center;
        }

        .score {
            font-size: 1.5em;
            color: #333;
            margin-bottom: 20px;
            font-weight: bold;
        }

        .question {
            font-size: 2.5em;
            margin-bottom: 30px;
            color: #333;
            font-weight: bold;
        }

        .visual-aids {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;
            margin: 20px 0;
            flex-wrap: wrap;
        }

        .emoji-container {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 2em;
            position: relative;
        }

        .emoji-item {
            display: inline-block;
            transition: all 0.3s ease;
            min-width: 1em;
            min-height: 1em;
            position: relative;
        }

        .emoji-item.emoji-fade-out {
            position: absolute;
            z-index: 10;
        }

        .operator {
            font-size: 3em;
            color: #667eea;
        }

        .answer-options {
            display: flex;
            gap: 15px;
            justify-content: center;
            flex-wrap: wrap;
            margin-top: 30px;
        }

        .answer-btn {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            border: 3px solid #667eea;
            background: white;
            font-size: 1.5em;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .answer-btn:hover {
            background: #667eea;
            color: white;
            transform: scale(1.1);
        }

        .feedback {
            font-size: 1.5em;
            margin-top: 20px;
            padding: 15px;
            border-radius: 15px;
            font-weight: bold;
            opacity: 0;
            transition: all 0.5s ease;
        }

        .feedback.show {
            opacity: 1;
        }

        .feedback.correct {
            background: #4caf50;
            color: white;
        }

        .feedback.incorrect {
            background: #f44336;
            color: white;
        }

        .next-btn {
            margin-top: 20px;
            padding: 12px 25px;
            background: #667eea;
            color: white;
            border: none;
            border-radius: 20px;
            font-size: 1.1em;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .next-btn:hover {
            background: #5a67d8;
            transform: translateY(-2px);
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-10px);
            }
            60% {
                transform: translateY(-5px);
            }
        }

        @keyframes celebrate {
            0% { transform: scale(1) rotate(0deg); }
            25% { transform: scale(1.2) rotate(5deg); }
            50% { transform: scale(1) rotate(-5deg); }
            75% { transform: scale(1.2) rotate(5deg); }
            100% { transform: scale(1) rotate(0deg); }
        }

        .celebrate {
            animation: celebrate 0.6s ease-in-out;
        }

        @keyframes fadeOut {
            0% {
                opacity: 1;
                transform: scale(1) rotate(0deg);
            }
            50% {
                opacity: 0.5;
                transform: scale(1.2) rotate(180deg);
            }
            100% {
                opacity: 0;
                transform: scale(0) rotate(360deg);
                visibility: hidden;
                position: absolute;
            }
        }

        @keyframes bounceIn {
            0% {
                opacity: 0;
                transform: scale(0);
            }
            50% {
                opacity: 1;
                transform: scale(1.2);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            75% { transform: translateX(5px); }
        }

        .emoji-fade-out {
            animation: fadeOut 1.5s ease-in-out forwards;
        }

        @keyframes crossOut {
            0% {
                opacity: 1;
                transform: scale(1);
            }
            50% {
                opacity: 0.7;
                transform: scale(1.1);
            }
            100% {
                opacity: 0.3;
                transform: scale(0.9);
            }
        }

        .emoji-cross-out {
            animation: crossOut 1s ease-in-out forwards;
            position: relative;
        }

        .emoji-cross-out::after {
            content: '❌';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 0.8em;
            opacity: 0;
            animation: crossAppear 1s ease-in-out forwards;
            animation-delay: 0.3s;
        }

        @keyframes crossAppear {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0);
            }
            50% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1.2);
            }
            100% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }
        }

        .emoji-bounce-in {
            animation: bounceIn 0.5s ease-out;
        }

        .subtract-highlight {
            animation: shake 0.5s ease-in-out;
            background-color: #ffeb3b !important;
            border-radius: 50%;
            padding: 5px;
        }

        .progress-container {
            margin: 20px 0;
            text-align: center;
        }

        .progress-text {
            font-size: 1.2em;
            color: #666;
            margin-bottom: 10px;
        }

        .start-subtraction-btn {
            background: linear-gradient(45deg, #ff9800, #ff5722);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 20px;
            font-size: 1.1em;
            cursor: pointer;
            margin-top: 15px;
            transition: all 0.3s ease;
        }

        .start-subtraction-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(255, 87, 34, 0.4);
        }

        .restart-subtraction-btn {
            background: linear-gradient(45deg, #9c27b0, #673ab7);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 20px;
            font-size: 1.1em;
            cursor: pointer;
            margin-left: 10px;
            transition: all 0.3s ease;
            display: none;
        }

        .restart-subtraction-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(103, 58, 183, 0.4);
        }

        @media (max-width: 600px) {
            .header h1 {
                font-size: 2em;
            }

            .game-area {
                padding: 20px;
            }

            .question {
                font-size: 2em;
            }

            .answer-btn {
                width: 60px;
                height: 60px;
                font-size: 1.2em;
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>🎈 小朋友数学乐园 🎈</h1>
        <p>一起来学习数学吧！</p>
    </div>

    <div class="game-selector">
        <button class="game-btn add-btn" onclick="startGame('add')">➕ 加法游戏</button>
        <button class="game-btn subtract-btn" onclick="startGame('subtract')">➖ 减法游戏</button>
        <button class="game-btn compare-btn" onclick="startGame('compare')">🔍 比大小</button>
    </div>

    <div class="game-area" id="gameArea">
        <div class="score">得分: <span id="score">0</span></div>
        <div class="question" id="question">选择一个游戏开始吧！</div>
        <div class="visual-aids" id="visualAids"></div>
        <div class="answer-options" id="answerOptions"></div>
        <div class="feedback" id="feedback"></div>
        <button class="next-btn" id="nextBtn" onclick="nextQuestion()" style="display: none;">下一题</button>
    </div>

    <script>
        let currentGame = null;
        let currentQuestion = null;
        let score = 0;
        let correctAnswer = 0;
        let subtractionStep = 0;
        let subtractionNum1 = 0;
        let subtractionNum2 = 0;
        let subtractionEmojis = [];

        const emojis = ['🍎', '🍌', '🍇', '🍓', '🍊', '🍉', '🥝', '🍑', '🍒', '🥭'];

        function startGame(gameType) {
            currentGame = gameType;
            score = 0;
            updateScore();
            generateQuestion();
        }

        function generateQuestion() {
            const feedback = document.getElementById('feedback');
            const nextBtn = document.getElementById('nextBtn');
            feedback.classList.remove('show');
            nextBtn.style.display = 'none';

            if (currentGame === 'add') {
                generateAdditionQuestion();
            } else if (currentGame === 'subtract') {
                generateSubtractionQuestion();
            } else if (currentGame === 'compare') {
                generateComparisonQuestion();
            }
        }

        function generateAdditionQuestion() {
            const num1 = Math.floor(Math.random() * 6) + 1;
            const num2 = Math.floor(Math.random() * (6 - num1 + 1)) + 1;
            correctAnswer = num1 + num2;

            document.getElementById('question').textContent = `${num1} + ${num2} = ?`;

            // 使用同一种水果emoji
            const emoji = emojis[Math.floor(Math.random() * emojis.length)];

            const visualAids = document.getElementById('visualAids');
            visualAids.innerHTML = `
                <div class="emoji-container">
                    ${emoji.repeat(num1)}
                </div>
                <div class="operator">➕</div>
                <div class="emoji-container">
                    ${emoji.repeat(num2)}
                </div>
                <div class="operator">=</div>
                <div class="emoji-container">
                    ${'❓'.repeat(correctAnswer)}
                </div>
            `;

            generateAnswerOptions(correctAnswer, [correctAnswer - 1, correctAnswer + 1, correctAnswer + 2].filter(n => n >= 0 && n <= 10));
        }

        function generateSubtractionQuestion() {
            subtractionStep = 0;
            subtractionNum1 = Math.floor(Math.random() * 10) + 1;
            subtractionNum2 = Math.floor(Math.random() * subtractionNum1) + 1;
            correctAnswer = subtractionNum1 - subtractionNum2;

            document.getElementById('question').textContent = `${subtractionNum1} - ${subtractionNum2} = ?`;

            const emoji = emojis[Math.floor(Math.random() * emojis.length)];
            subtractionEmojis = Array(subtractionNum1).fill(emoji);

            const visualAids = document.getElementById('visualAids');
            visualAids.innerHTML = `
                <div class="progress-container">
                    <div class="progress-text">我们要从 ${subtractionNum1} 个水果中拿走 ${subtractionNum2} 个</div>
                    <div>
                        <button class="start-subtraction-btn" onclick="startSubtractionAnimation()">开始减法动画 🎬</button>
                        <button class="restart-subtraction-btn" id="restartBtn" onclick="restartSubtractionAnimation()">重新演示 🔄</button>
                    </div>
                </div>
                <div class="emoji-container">
                    ${emoji.repeat(subtractionNum1)}
                </div>
                <div class="operator">➖</div>
                <div class="emoji-container">
                    ${emoji.repeat(subtractionNum2)}
                </div>
                <div class="operator">=</div>
                <div class="emoji-container" id="resultContainer">
                    ${Array(subtractionNum1).fill(emoji).map((e, i) => `<span class="result-emoji" id="result-emoji-${i}">${e}</span>`).join('')}
                </div>
            `;

            // 暂时不显示答案选项，等动画完成后显示
            document.getElementById('answerOptions').innerHTML = '';
        }

        function startSubtractionAnimation() {
            const startBtn = document.querySelector('.start-subtraction-btn');
            const restartBtn = document.getElementById('restartBtn');

            startBtn.style.display = 'none';
            restartBtn.style.display = 'inline-block';

            const progressText = document.querySelector('.progress-text');
            progressText.textContent = `准备拿走 ${subtractionNum2} 个水果...`;

            animateSubtraction();
        }

        function restartSubtractionAnimation() {
            // 重置动画状态
            subtractionStep = 0;

            // 重置结果区域的所有emoji
            const resultContainer = document.getElementById('resultContainer');
            resultContainer.innerHTML = `
                ${Array(subtractionNum1).fill(subtractionEmojis[0]).map((e, i) => `<span class="result-emoji" id="result-emoji-${i}">${e}</span>`).join('')}
            `;

            // 隐藏答案选项
            document.getElementById('answerOptions').innerHTML = '';

            // 重置按钮状态
            const startBtn = document.querySelector('.start-subtraction-btn');
            const restartBtn = document.getElementById('restartBtn');
            const feedback = document.getElementById('feedback');
            const nextBtn = document.getElementById('nextBtn');

            startBtn.style.display = 'inline-block';
            restartBtn.style.display = 'none';
            feedback.classList.remove('show');
            nextBtn.style.display = 'none';

            // 重置进度文本
            const progressText = document.querySelector('.progress-text');
            progressText.textContent = `我们要从 ${subtractionNum1} 个水果中拿走 ${subtractionNum2} 个`;

            // 启用所有答案按钮
            document.querySelectorAll('.answer-btn').forEach(btn => {
                btn.disabled = false;
                btn.style.opacity = '1';
            });
        }

        function animateSubtraction() {
            if (subtractionStep >= subtractionNum2) {
                // 动画完成，显示答案选项
                completeSubtractionAnimation();
                return;
            }

            const progressText = document.querySelector('.progress-text');
            progressText.textContent = `正在拿走第 ${subtractionStep + 1} 个水果...`;

            // 在结果区域选择emoji进行打叉动画（从左到右）
            const resultContainer = document.getElementById('resultContainer');
            const availableEmojis = resultContainer.querySelectorAll(':scope > .result-emoji:not(.emoji-cross-out)');

            if (availableEmojis.length > 0) {
                // 选择最左边的emoji
                const leftmostEmoji = availableEmojis[0];

                // 给emoji添加类和样式以便进行动画
                leftmostEmoji.classList.add('emoji-item', 'subtract-highlight');

                setTimeout(() => {
                    leftmostEmoji.classList.remove('subtract-highlight');
                    leftmostEmoji.classList.add('emoji-cross-out');

                    subtractionStep++;

                    setTimeout(() => {
                        animateSubtraction();
                    }, 1000);
                }, 600);
            }
        }

        function completeSubtractionAnimation() {
            const progressText = document.querySelector('.progress-text');
            progressText.textContent = `完成了！还剩下 ${correctAnswer} 个水果 🎉`;

            const resultContainer = document.getElementById('resultContainer');

            // 清理已打叉的emoji，保留剩下的
            setTimeout(() => {
                const remainingEmojis = resultContainer.querySelectorAll(':scope > .result-emoji:not(.emoji-cross-out)');

                // 给剩下的emoji添加弹跳动画
                remainingEmojis.forEach((emoji, index) => {
                    setTimeout(() => {
                        emoji.classList.add('emoji-bounce-in');
                    }, index * 100);
                });

                // 显示答案选项
                setTimeout(() => {
                    generateAnswerOptions(correctAnswer, [correctAnswer + 1, correctAnswer - 1, correctAnswer + 2].filter(n => n >= 0 && n <= 10));
                }, remainingEmojis.length * 100 + 500);
            }, 500);
        }

        function generateComparisonQuestion() {
            const num1 = Math.floor(Math.random() * 10) + 1;
            const num2 = Math.floor(Math.random() * 10) + 1;

            document.getElementById('question').textContent = '哪个数字更大？';

            const visualAids = document.getElementById('visualAids');
            visualAids.innerHTML = `
                <div class="emoji-container">
                    <div style="text-align: center;">
                        <div style="font-size: 2em; margin-bottom: 10px;">${num1}</div>
                        ${generateEmojis(num1)}
                    </div>
                </div>
                <div class="operator">VS</div>
                <div class="emoji-container">
                    <div style="text-align: center;">
                        <div style="font-size: 2em; margin-bottom: 10px;">${num2}</div>
                        ${generateEmojis(num2)}
                    </div>
                </div>
            `;

            correctAnswer = num1 > num2 ? num1 : num2;
            const wrongAnswers = num1 > num2 ? [num2, num1 - 1, num1 + 1] : [num1, num2 - 1, num2 + 1];
            generateAnswerOptions(correctAnswer, wrongAnswers.filter(n => n > 0 && n <= 10 && n !== correctAnswer));
        }

        function generateEmojis(count) {
            const emoji = emojis[Math.floor(Math.random() * emojis.length)];
            return emoji.repeat(count);
        }

        function generateAnswerOptions(correct, wrongs) {
            const options = [correct, ...wrongs].sort(() => Math.random() - 0.5);
            const answerOptions = document.getElementById('answerOptions');

            answerOptions.innerHTML = options.map(num =>
                `<button class="answer-btn" onclick="checkAnswer(${num}, this)">${num}</button>`
            ).join('');
        }

        function checkAnswer(answer, clickedButton) {
            const feedback = document.getElementById('feedback');
            const nextBtn = document.getElementById('nextBtn');

            if (answer === correctAnswer) {
                score += 10;
                updateScore();
                feedback.textContent = '🎉 答对了！你真棒！';
                feedback.className = 'feedback correct show';
                document.querySelector('.game-area').classList.add('celebrate');

                setTimeout(() => {
                    document.querySelector('.game-area').classList.remove('celebrate');
                }, 600);

                // 答对后显示下一题按钮
                nextBtn.style.display = 'inline-block';

                // 禁用所有答案按钮
                document.querySelectorAll('.answer-btn').forEach(btn => {
                    btn.disabled = true;
                    btn.style.opacity = '0.5';
                });
            } else {
                feedback.textContent = '❌ 答错了，再试试看！';
                feedback.className = 'feedback incorrect show';

                // 标记错误答案但允许继续选择
                clickedButton.style.background = '#ffcdd2';
                clickedButton.style.transform = 'scale(0.9)';

                setTimeout(() => {
                    clickedButton.style.background = 'white';
                    clickedButton.style.transform = 'scale(1)';
                }, 300);
            }
        }

        function nextQuestion() {
            // 启用所有答案按钮
            document.querySelectorAll('.answer-btn').forEach(btn => {
                btn.disabled = false;
                btn.style.opacity = '1';
            });

            generateQuestion();
        }

        function updateScore() {
            document.getElementById('score').textContent = score;
        }

        // 添加键盘支持
        document.addEventListener('keydown', function(e) {
            if (e.key >= '0' && e.key <= '9') {
                const num = parseInt(e.key);
                const buttons = document.querySelectorAll('.answer-btn');
                buttons.forEach(btn => {
                    if (parseInt(btn.textContent) === num) {
                        btn.click();
                    }
                });
            }
        });
    </script>
</body>
</html>